<!-- 次级评论 -->
<template>
  <div class="sub-comments" v-if="!deleteSelf">
    <div class="sub-comment-header">
      <img :src="comment.userinfo.userProfile" @click="toUserCenter(1)" />
      <h4 @click="toUserCenter(1)">{{ comment.userinfo.nickname }}</h4>
      <span>回复了</span>
      <h4 @click="toUserCenter(2)">{{ UserReplied.userNickname }}</h4>
      <span>{{ comment.commentTime }}</span>
    </div>
    <div class="comment-content" v-html="comment.commentContent"></div>
    <div class="comment-footer" v-if="commentfooter">
      <div class="fave-container" @click="handleLike()">
        <favebutton :status="likeStatus"></favebutton>
        <span class="fave-times">{{ likeNumber }}</span>
      </div>
      <div>
        <div class="fave-container" @click="handleCollect()">
          <collectionbutton :status="collectStatus"></collectionbutton>
          <span class="fave-times">{{ collectNumber }}</span>
        </div>
        <div class="fave-container" @click="openComment()">
          <commentbutton :status="false"></commentbutton>
        </div>
        <div class="fave-container" @click="handleReport()">
          <reportbutton :status="false"></reportbutton>
        </div>
      </div>
      <div
        class="delete-button-container"
        v-if="user.userNo == comment.userinfo.userNo"
        @click="deleteComment()"
      >
        <deletebutton :status="false"></deletebutton>
      </div>
    </div>
    <div class="others-comments" v-if="commentinputVis">
      <div class="comment-input-container">
        <div class="post-comment-input">
          <commentinput
            v-model="subCommentContent"
            :commentContent="subCommentContent"
          ></commentinput>
        </div>
        <button class="post-comment-button" @click="sendComment()">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cmfabu"></use>
          </svg>
          发布
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Collectionbutton from "../collectionbutton.vue";
import Favebutton from "../favebutton.vue";
import Deletebutton from "../littlebutton/deletebutton.vue";
import Commentbutton from "../littlebutton/commentbutton";
import Reportbutton from "../littlebutton/reportbutton.vue";
import commentinput from "./commentinput.vue";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      UserReplied: "",
      commentinputVis: false,
      subCommentContent: "",
      deleteSelf:false
    };
  },

  components: {
    Favebutton,
    Collectionbutton,
    Reportbutton,
    Deletebutton,
    Commentbutton,
    commentinput,
  },

  props: ["comment", "commentfooter",'fatherCommentNo'],

  computed: {
    ...mapGetters(["user"]),
  },

  created() {
    this.getUserReplied();
  },

  methods: {
    getUserReplied() {
      const that = this;
      this.$getApi.getUserReplied(this.comment.replyNo).then((res) => {
        that.UserReplied = res.data.userInformation;
      });
    },
    deleteComment() {
      //删除评论
      this.$getApi.deleteComment(this.comment.commentNo);
      this.deleteSelf = true;
    },
    toUserCenter(flag) {
      //1为跳转至当前评论的评论者，2为跳转至被评论者
      let userNo;
      if (flag == 1) {
        userNo = this.comment.userNo;
      } else {
        userNo = this.comment.replyNo;
      }
      this.$router.push({ path: "/usercenter", query: { userNo: userNo } });
      location.reload();
    },
    sendComment() {
      let newdate = new Date();
      let commentTime = newdate.toLocaleString("chinese", { hour12: false });
      commentTime = commentTime.replace(/\//g, "-");
      let commentContentTemp = this.subCommentContent.replace(
        /[\n\r]/g,
        "<br>"
      );
      console.log(commentContentTemp);
      let that = this;
      this.subCommentContent = "";
      this.commentinputVis = false;
      // eslint-disable-next-line no-unused-vars
      this.$getApi
        .addComment(
          this.$route.query.postNo,
          this.user.userNo,
          commentTime,
          commentContentTemp,
          this.comment.commentNo, //被回复评论编号
          this.fatherCommentNo
        )
        .then(() => {
          that.$parent.getSubComments()
        });
    },
    openComment(){
        this.commentinputVis = !this.commentinputVis
    }
  },
};
</script>
<style>
.sub-comment-header {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sub-comment-header > img {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-position: center;
  cursor: pointer;
}
.sub-comment-header > h4 {
  margin: 0 8px;
  font-weight: 500;
}
.sub-comment-header > span:nth-child(3) {
  color: rgb(152, 152, 152);
  font-size: 16px;
}
.sub-comment-header > span:nth-child(5) {
  position: absolute;
  right: 0;
  color: rgb(152, 152, 152);
  font-size: 14px;
}
</style>